<template>
  <div class="app-container">
    <el-row>
      <el-col :span="5">
        <el-input placeholder="搜索" @change="getSearchContent()" v-model="keyword">
          <el-button slot="append" @click="getSearchContent()" icon="search"></el-button>
        </el-input>
      </el-col>
      <el-col :span="5">
        <el-select style="margin-left: 15px;" v-model="classify" placeholder="全部" @change="changeClassify">
          <el-option key="0" label="全部分类" value="0">
          </el-option>
          <el-option v-for="item in classifyList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">

        <el-button v-if="multipleSelection != 0" type="danger" style="margin-left: 15px;" @click="deleteSelection()">删除选中</el-button>
        <el-button v-if="multipleSelection != 0" @click="toggleSelection()">取消选择</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col v-loading.body="loading">
        <el-table :data="tableData" ref="multipleTable"  @selection-change="handleSelectionChange" border>
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="商品编号" width="100">
            <template scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" min-width="150">
            <template scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品价格" min-width="100">
            <template scope="scope">
              <span>¥ {{ scope.row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品库存" min-width="100">
            <template scope="scope">
              <span>{{ scope.row.stock }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="150">
            <template scope="scope">
              <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-pagination :current-page.sync="currentPage" :page-size="5" layout="total, prev, pager, next" :total="total" @current-change="handleCurrentChange">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { getClassify, getGoods,deleteGoods } from '@/api/goods'
  import { getToken } from '@/utils/auth'
  export default {
    data() {
      return {
        total:0,
        keyword: "",
        classify: "全部分类",

        classifyValue: 0,
        classifyList: [
        ],
        loading: true,
        dialogVisible: false,
        tableData: [],
        multipleSelection: [],
        currentPage: 1,
        goods_id:0
      };
    },
    created() {
      this.$nextTick(() => {
        getClassify(getToken(), 1).then((res) => {
          if(res.classify){
              this.classifyList = res.classify
          this.goods_id = res.classify[0].goods_id
          this.handleCurrentChange()
          }
         
        })
      })

    },
    methods: {
      handleCurrentChange() {
         let goods_id = this.goods_id
         let currentPage = this.currentPage
         let keyword = this.keyword
         let classifyValue = this.classifyValue
        getGoods(goods_id, currentPage, keyword, classifyValue).then((res) => {
          this.loading = false;
          this.tableData = res.goods
          this.total = res.count
        })

      },
      onSubmit() {
        this.$message("submit!");
      },
      handleClose(done) {
        this.$confirm("放弃新建？")
          .then(_ => {
            done();
          })
          .catch(_ => { });
      },
      editClose(done) {
        this.$confirm("放弃编辑？")
          .then(_ => {
            done();
          })
          .catch(_ => { });
      },
      handleEdit(row) {
       this.classifyList.map((item)=>{
         if(item.id==row.parent_id){
             row.classify = item.name
              row.classifyId = item.id
         }
       })

        let data =encodeURIComponent(JSON.stringify(row))  
        
        this.$router.push({ path: `/goods/new?data=${data}` })
      },
      handleDelete(index, row) {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.tableData.splice(index, 1)
            deleteGoods(row.id).then((res)=>{
                 if(res.status==1){
                   this.$message({
              type: "success",
              message: "删除成功!"
            });
           this.handleCurrentChange()
                 }
            })
           
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      deleteSelection() {
        this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.multipleSelection.map((item,index)=>{
              let id = item.id
              deleteGoods(id)
               this.tableData.splice(index, 1)
            })
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      changeClassify(e) {
        this.classifyValue = e
        this.handleCurrentChange()
      },
      getSearchContent(){
        this.keyword = this.keyword.replace("'","")
        this.handleCurrentChange()
      }
    }
  };

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
</style>